<template>
	<view>
		<n-loading></n-loading>
		<view class="publicPage">
			<view class="shopList" v-if="storeReady">
				<view class="nodata" v-if="storeList.length==0">
					<image src="../../static/svgIcon/noStore.svg" mode=""></image>
					<view class="tips">暂无可取货门店~</view>
				</view>
				<view class="itemShop" v-for="(item,index) of storeList" :key="index" @tap="tomap(item.lat,item.lon,item.name,item.address) ">
					<!-- <image :src="item.logo" alt="店铺封面"></image> -->
					<dh-image class="storeLogo" :src="item.logo" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
					<view class="shopRight">
						<view class="shopName">{{item.name}}</view>
						<view class="labelBox">
							<label class="state" v-if="timeRange(item.open_time.start_at,item.open_time.end_at,dateType(2)) == true">正在营业</label>
							<label class="state_close" v-else>暂停营业</label>
							<view class="distance">{{item.visitor}}人到店</view>
						</view>
						<!-- geoDistance(104.071279,30.55403,item.lat,item.lon) -->
						<view class="address">{{item.type_name==null?'':item.type_name}} <text>{{item.circle==null?'':item.circle}}</text> <text><text class="fr">{{item.distance}}km</text></text></view>
						<view class="favourable" v-if="item.activities.activity!=null">
							<image src="../../static/img/favourable.svg" mode=""></image>
							￥{{item.activities.activity.price}}
							<text class="yj">￥{{item.activities.activity.mktprice}}</text>
							{{item.activities.activity.name}}
						</view>
						<view class="favourable" v-if="item.activities.coupon!=null">
							<image src="../../static/img/arch.svg" mode=""></image>
							{{item.activities.coupon.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeList:[],
				storeReady:null,
				lat:0,
				lon:0,
			}
		},
		onLoad() {
			this.isGetLocation();
		},
		methods: {
			// 获取定位
			getAuthorizeInfo(a="scope.userLocation"){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this=this;
				uni.authorize({
					scope: a,
					success() { //1.1 允许授权
						_this.getLocationInfo();
					},
					fail(){    //1.2 拒绝授权
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			getLocationInfo(){  //2. 获取地理位置
				var _this=this;
				uni.getLocation({
					type: 'gcj02',
					success (res) {
						_this.lat = res.latitude;
						_this.lon = res.longitude;
						_this.getStore();
					}
				});
			},
			isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性，参考下截图
				var _this=this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						}else{
							_this.getLocationInfo()
						}
					}
				});
			},
			getStore() {
				this.apiget('/shop/store-front/search-store',{lat:this.lat,lon:this.lon}).then(res =>{
					if(res.data.status == 200 ) {
						this.storeList = res.data.data.list;
						this.storeReady = 1;
					}
				})
			},
			tomap(lat,lon,name,address) {
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lon),
					name:name,
					address:address,
					success: function () {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.address {
		margin-top: 10rpx;
		padding-bottom: 8rpx;
		font-size: 24rpx;
		box-shadow: inset 0px -0.5px 0px #ECEEF0;
		
		text{
			margin-left: 16rpx;
		}
		.fr{
			float: right;
		}
	}

	.publicPage {
		// padding-top: 100rpx;
		min-height:100%;
		background-color: #F8F8FA;
	}
	
	.searchBox{
		position: fixed;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		left: 0;
		z-index: 2;
		width: 100%;
		padding: 10rpx 32rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	.dropdown{
		// position: fixed;
		width: 100%;
		// z-index: 99;
		// margin-top: 44px;
	}
	.u-dropdown {
		background-color: #FFFFFF;
	}

	.shopList {
		padding: 32rpx;
	}

	.itemShop {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 16rpx;
		padding: 20rpx;
		display: flex;
		// align-items: center;
		line-height: 40rpx;

		.storeLogo {
			width: 186rpx;
			height: 140rpx;
			margin-right: 20rpx;
			border-radius: 16rpx;
		}

		.shopRight {
			width: 1px;
			flex: auto;

			.labelBox {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
			}

			label {
				padding: 4rpx 10rpx;
				background: #FFEEEC;
				font-size: 22rpx;
				color: #FF5238;
				margin-right: 8rpx;
				border-radius: 4rpx;
				// border: 1rpx solid #FF5238;
			}
			.state_close{
				padding: 4rpx 10rpx;
				background: #ECEEF0;
				font-size: 22rpx;
				color: #999999;
				margin-right: 8rpx;
				border-radius: 4rpx;
				// border: 1rpx solid #999;
			}
			.phone {
				background-color: #FFFFFF;
				color: #FF5238;
				border: 1rpx solid #FF5238;
			}

			.distance {
				margin-left: auto;
				font-size: 24rpx;
				color: #FF5238;
			}
		}

		.shopName {
			font-size: 32rpx;
			font-weight: 500;
		}
	}
	.favourable{
		margin-top: 8rpx;
		display: flex;
		align-items: center;
		font-size: 12px;
		line-height: 18px;
		
		image{
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
		
		.yj{
			margin: 0 8rpx;
			text-decoration: line-through;
		}
	}
</style>
